<!-- album detail -->
<template>
  <div class="AlbumList">
    <div
      class="backgroundCover"
      :style="'background:url(' + albumInfo.cover + ')'"
    ></div>
    <div class="list">
      <div class="tools">
        <div
          class="openAllBtn"
          ref="playAll"
          v-items="{ default: true }"
          @click="playAll(list)"
        >
          <span class="iconfont icon-bofang"></span>
          <span>播放全部</span>
        </div>
      </div>
      <div style="height:20px"></div>
      <div id="itemBox" class="itemBox">
        <div class="item" v-for="(item, index) in list" :key="index">
          <div
            class="indexBox"
            v-items
            :id="'listItem' + index"
            :ref="'listItem' + index"
            @up="up(index)"
            @right="autoMove('right', index)"
            @left="autoMove('left', index)"
            @down="down(index)"
            @click="play(item)"
          >
            <span class="itemIndex">{{ index + 1 }}</span>
            <span class="itemName">{{ item.name }}</span>
            <span class="itemArtist">{{ item.artist }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="player">
      <MKPlayer ref="MKPlayer" />
    </div>
  </div>
</template>

<script>
import MKPlayer from "@/components/Player";
var VueScrollTo = require("vue-scrollto");
export default {
  components: {
    MKPlayer
  },
  data() {
    return {
      id: false,
      albumInfo: false,
      list: false
    };
  },
  watch: {
    $service(newValue) {
      // eslint-disable-next-line no-console
      console.log(newValue);
    }
  },
  created() {
    // window.android.setMoiveStatus("2");
    this.id = this.$route.params.id;
    this.albumDetailLoading();
  },
  methods: {
    albumDetailLoading() {
      this.$api.albumDetailLoading(this);
    },
    autoMove(direction, index) {
      if (direction == "right") {
        if (index + 6 > this.list.length - 1) {
          return false;
        }
        this.$service.move(this.$refs["listItem" + (index + 6)][0]);
        this.scoll(index + 6);
      } else if (direction == "left") {
        if (index - 6 < 0) {
          return false;
        }
        this.$service.move(this.$refs["listItem" + (index - 6)][0]);
        this.scoll(index - 6);
      }
    },
    up(index) {
      if (index == 0 || (index + 1) % 6 == 1) {
        this.$service.move(this.$refs.playAll);
      } else {
        this.$service.move(this.$refs["listItem" + (index - 1)][0]);
        this.scoll(index - 1);
      }
    },
    down(index) {
      if (index + 1 == this.list.length || (index + 1) % 6 == 0) {
        this.$refs.MKPlayer.goinplayerBoxItem();
      } else {
        this.$service.move(this.$refs["listItem" + (index + 1)][0]);
        this.scoll(index + 1);
      }
    },
    scoll(index) {
      let element = "#listItem" + index;
      let duration = 100;
      var options = {
        container: "#itemBox",
        easing: "linear",
        offset: 0,
        force: true,
        cancelable: true,
        x: true,
        y: false
      };
      VueScrollTo.scrollTo(element, duration, options);
    },
    serviceBack() {
      this.$router.go(-1); //默认将路由返回上一页
      //这里可以添加其他操作
    },
    play(item) {
      this.$player.play(this, item);
      this.$router.push({
        path: "/player"
      });
    },
    playAll(list) {
      this.$player.play(this, list[0]);
      this.$player.addPlayerList(this, list);
    }
  }
};
</script>

<style lang="less" scoped>
.AlbumList {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.backgroundCover {
  position: fixed;
  width: 100%;
  height: 80vh;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  filter: blur(30px);
  z-index: -1;
}
.list {
  height: 82vh;
  //   background-color: #25272d;
  padding: 4vh;
  //   background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.51' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}
.player {
  width: 100%;
  height: 10vh;
}
.openAllBtn {
  width: 20%;
  height: 60px;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  padding: 4px;
}
.openAllBtn > span {
  color: #fff;
  font-size: 20px;
  line-height: 30px;
  margin: 0px 20px;
}
// 去除滚动条
#itemBox::-webkit-scrollbar {
  display: none;
}
.itemBox {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  height: 52vh;
  overflow-x: auto;
}
.item {
  width: 50%;
  height: 8vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  color: #fff;
}

.indexBox {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  padding: 4px;
}
.indexBox > span {
  text-align-last: center;
}
.itemIndex {
  width: 20%;
}
.itemName {
  width: 50%;
}
.itemArtist {
  width: 30%;
}
</style>
